<link rel="stylesheet" type="text/css" href="./css/jquery-ui-1.8.6.custom.css" />
<script type="text/javascript" src="./js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="./js/util.js"></script>
<script type="text/javascript">
	var categoryQuery = null; 
	var basicCondDiv = null; 
	var scondDiv = null;
	$('document').ready(function() {
		basicCondDiv = $('#basic_cond_div');
		scondDiv = $('#search_cond');
		
		$('#detail_search').hide();
		$('#to_detail_search').click(function() {
			$('#detail_search').fadeIn('fast');
			$('#normal_search').fadeOut('fast');
		});
		$('#to_normal_search').click(function() {
			$('#detail_search').fadeOut('fast');
			$('#normal_search').fadeIn('fast');
			scondDiv.hide();
		});
		
		categoryQuery = $('#category_query');
		categoryQuery.append('<option value="">선택하세요</option>');
		$.getJSON('get_category_list.php', "", function(data) {
			$.each(data, function(categories, category) {
				categoryQuery.append('<option value="'+category.category+'">'+category.category+'</option>');
			});
		});
		$('#startdate_query').datetimepicker({dateFormat: 'yy-mm-dd'});
		$('#enddate_query').datetimepicker({dateFormat: 'yy-mm-dd'});
		$('#starttime_query').timepicker({});
		$('#endtime_query').timepicker({});
		

	});
	
	var condCnt = 0;
	function appendBasicCond() {
		condCnt++;
		basicCondDiv.append(
			'<div id="basic_cond_'+condCnt+'">'+
				'<label class="label" style="padding-top:5px">기본조건['+condCnt+']</label>'+
				'<select class="age" id="age'+condCnt+'" name="age'+condCnt+'">'+
					'<option value="0" selected="true">연령대</option>'+
					'<option value="10">10대</option>'+
					'<option value="20">20대</option>'+
					'<option value="30">30대</option>'+
					'<option value="40">40대</option>'+
					'<option value="50">50대</option>'+
					'<option value="60">60대</option>'+
				'</select>'+
				'<span>&nbsp;&amp;&nbsp;</span>'+
				'<select class="gender" id="gender'+condCnt+'" name="gender'+condCnt+'">'+
					'<option value="0" selected="true">성별</option>'+
					'<option value="1">남</option>'+
					'<option value="2">여</option>'+
				'</select>'+
				'<span>&nbsp;&amp;&nbsp;</span>'+
				'<select class="edulevel" id="edulevel'+condCnt+'" name="edulevel'+condCnt+'">'+
					'<option value="0" selected="true">학력</option>'+
					'<option value="1">중졸 이하</option>'+
					'<option value="2">고졸</option>'+
					'<option value="3">초대졸</option>'+
					'<option value="4">대졸</option>'+
					'<option value="5">대학원졸 이상</option>'+
				'</select>'+
				'<span>&nbsp;&amp;&nbsp;</span>'+
				'<input class="addr" type="text" id="addr'+condCnt+'" name="addr'+condCnt+'" size="50" />'+
				'<input type="button" value="주소" onclick="openPopup(\'select_location.php?form_name=detail_search&addr_field_name=addr'+condCnt+'\', \'select_location\', 320, 240)"/>'+
				'<input type="button" value="이 조건 삭제" style="width: 100px" onclick="removeBasicCond('+condCnt+');"/>'+
			'</div>');
		renumberBasicCond();
	}
	function removeBasicCond(num) {
		$('#basic_cond_'+num).remove();
		renumberBasicCond();
	}
	
	function renumberBasicCond() {
		var i = 1;
		basicCondDiv.find('label').each(function(index) {
			$(this).text("기본조건[" + (index+1) + "]");
		});
	}
	
	function searchByKeyword() {
		var query = buildQuery("<?php echo $_SESSION['location']; ?>",
													"<?php echo $_SESSION['latitude']; ?>",
													"<?php echo $_SESSION['longitude']; ?>",
													printNow(),
													null,
													document.getElementById("search_query").value);
		printSurveyListBy(query, false);
		scondDiv.hide();
	}
	
	function searchByDetail() {
		var queryData = {
			'title': document.getElementById('title_query').value,
			'category': document.getElementById('category_query').value,
			'keyword': document.getElementById('keyword_query').value,
			'is_allow_expire': document.getElementById('is_allow_expire_query').checked,
			'location': document.getElementById('location_query').value,
			'startdate': document.getElementById('startdate_query').value,
			'enddate': document.getElementById('enddate_query').value,
			'starttime': document.getElementById('starttime_query').value,
			'endtime': document.getElementById('endtime_query').value
		};
		var basicCondHtml = "";
		var sbasicCondDiv = scondDiv.find('.basic');
		var basicConds = [];
		basicCondDiv.find('div').each(function(index) {
			var basicCond = {'age': $(this).find('.age').val(),
												'gender': $(this).find('.gender').val(),
												'edulevel': $(this).find('.edulevel').val(),
												'addr': $(this).find('.addr').val()
											};
			
			if (basicCond.age != 0 || basicCond.gender != 0 || basicCond.edulevel != 0 || basicCond.addr != "") {
				basicCondHtml += '기본조건['+(index+1)+']: ';
				if (basicCond.age != 0)
					basicCondHtml += '연령대: '+basicCond.age+'대, ';
				if (basicCond.gender != 0)
					basicCondHtml += '성별: '+(basicCond.gender==1 ? '남':'여')+'성, ';
				if (basicCond.edulevel != 0) {
					basicCondHtml += '학력: ';
					switch (basicCond.edulevel) {
						case '1': basicCondHtml += '중졸 이하'; break;
						case '2': basicCondHtml += '고졸'; break;
						case '3': basicCondHtml += '초대졸'; break;
						case '4': basicCondHtml += '대졸'; break;
						case '5': basicCondHtml += '대학원졸 이상'; break;
					}
					basicCondHtml += ', '
				}
				if (basicCond.addr != "")
					basicCondHtml = '거주지: '+basicCond.addr+', ';
				basicCondHtml = basicCondHtml.replace(/\,\s*$/, "")
				basicCondHtml += "<br />";
			}
			
			basicConds.push(basicCond);			
		});
		
		queryData['basic_conds'] = basicConds;
		printSurveyListBy(queryData, false);
		
		scondDiv.show();
		var condString = "";
		if (queryData.title)
			condString += "제목: "+queryData.title+", ";
		if (queryData.category)
			condString += "카테고리: "+queryData.category+", ";
		if (queryData.keyword)
			condString += "키워드: "+queryData.keyword+", ";
		if (queryData.is_allow_expire)
			condString += "만료설문포함: 예, ";
		else
			condString += "만료설문포함: 아니오, ";
		if (queryData.location)
			condString += "위치: "+queryData.location+", ";
		if (queryData.startdate)
			condString += "시작날짜: "+queryData.startdate+", ";
		if (queryData.enddate)
			condString += "종료날짜: "+queryData.enddate+", ";
		if (queryData.starttime)
			condString += "시작시간: "+queryData.starttime+", ";
		if (queryData.endtime)
			condString += "종료시간: "+queryData.endtime+", ";
		condString = condString.replace(/\,\s*$/, "")
		scondDiv.find('.base').text(condString);
		scondDiv.find('.basic').html(basicCondHtml);
	}
</script>
<style text="text/css">
<!--
#detail_search .label {
	display: block;
	width: 70px;
	float: left;
	margin-left: 10px;
}
.left_float {
	float: left;
}
#to_detail_search, #to_normal_search {
	width: 100px;
}

#detail_search {
	margin-left: 50px;
}
#detail_search div {
	padding-left: 5px;
	padding-bottom: 3px;
}
#search_button_div {
	margin-top: 3px;
	margin-right: 12%;
	float: right;
}

#is_expire_query {
	margin-left: 5px;
}
.block {
display: block;
}

#basic_cond_div {
	margin-left: 10px;
	font-size: 0.9em;
}
#basic_cond_div .label {
	padding-top: 2px;
	width: 90px;
}
-->
</style>
<div id="search_bar">
<form id="normal_search" action="#" onsubmit="searchByKeyword(); return false;">
<table>
	<tr><td>
		키워드 검색 
		<input type="text" size="70" id="search_query" name="search_query" />
		<input type="submit" value="설문검색" />
		<input id="to_detail_search" type="button" value="상세검색보기" />
	</td></tr>
</table>
</form>
<form id="detail_search" action="#" onsubmit="searchByDetail(); return false;">
<div id="search_button_div">
	<input type="submit" value="설문검색" />
	<input type="button" id="to_normal_search" value="일반검색보기" />
	<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
	<input type="reset" value="지우기" />
</div>
<div style="padding-top: 5px">
	<label for="title_query" class="label">제목</label>
	<input type="text" id="title_query" name="title_query" size="70" class="left_float" />
	<label for="title_query" class="label">카테고리</label>
	<select id="category_query" name="category_query">
	</select>
</div>
<div>
	<label for="keyword_query" class="label">키워드</label>
	<input type="text" id="keyword_query" name="keyword_query" size="70" />
	<input type="checkbox" id="is_allow_expire_query" name="is_allow_expire_query" />
	<label for="is_allow_expire_query">만료설문포함</label>
</div>
<div>
	<label for="location_query" class="label">위치</label>
	<input type="text" id="location_query" name="location_query" size="70" />
	<input type="button" value="선택" onclick="openPopup('select_location_cond.php', 'select_location_cond', 600, 300)" />
</div>
<div>
	<label for="startdate_query" class="label">기간</label>
	<input type="text" id="startdate_query" name="startdate_query" size="15" class="left_float" />
	<span class="block left_float">&nbsp;~&nbsp;</span>
	<input type="text" id="enddate_query" name="enddate_query" size="15" class="left_float" />
	<label for="starttime_query" class="label" style="margin-left: 20px; width: 60px">시간대</label>
	<input type="text" id="starttime_query" name="starttime_query" size="5" class="left_float" />
	<span class="block left_float">&nbsp;~&nbsp;</span>
	<input type="text" id="endtime_query" name="endtime_query" size="5" />
</div>
<div>
	<label for="" class="label">기본조건</label>
	<input type="button" value="추가" onclick="appendBasicCond()" />
</div>
<div id="basic_cond_div">
<!--
	<div id="basic_cond_1">
	<label for="" class="label">기본조건[1]</label>
	<select id="age1" name="age1">
		<option value="0" selected="true">연령대</option>
		<option value="10">10대</option>
		<option value="20">20대</option>
		<option value="30">30대</option>
		<option value="40">40대</option>
		<option value="50">50대</option>
		<option value="60">60대</option>
	</select>
	<span>&amp;</span>
	<select id="gender1" name="age1">
		<option value="0" selected="true">성별</option>
		<option value="1">남</option>
		<option value="2">여</option>
	</select>
	<span>&amp;</span>
	<select id="edulevel1" name="age1">
		<option value="0" selected="true">학력</option>
		<option value="1">중졸 이하</option>
		<option value="2">고졸</option>
		<option value="3">초대졸</option>
		<option value="4">대졸</option>
		<option value="5">대학원졸 이상</option>
	</select>
	<span>&amp;</span>
	<input type="text" id="addr1" name="addr1" size="50" />
	<input type="button" value="주소" /> 
	<input type="button" value="이 조건 삭제" style="width: 100px" />
	</div>
-->
</div>
</form>
</div>